<template>
	<view :class="{bg141414:theme}" style="min-height: 100vh;">
	<view class="pb200">
		<view class="con posire zindex5" :style="{paddingTop:shh+10+'px'}">
			<view class="flex-ju-b pt20">
				<view @click="back">
					<image class="image width32" mode="widthFix" :src="theme?'/static/back.png':'/static/hback.png'"></image>
				</view>
				<view class="flex-a-i size24">
					<view @click="navto('/pages/zixun/gonggao?id='+info.id)"  class="flex-ju-c wh175-61 ra15  mr20 borderE1E1E1"
						 :style="{background:theme?'rgba(20, 20, 20, 0.5)':'rgba(255, 255, 255, 0.5)'}">
						相关公告
					</view>
					<view @click="youma"  class="flex-ju-c wh175-61 ra15 borderE1E1E1 mr20"
						:style="{background:theme?'rgba(20, 20, 20, 0.5)':'rgba(255, 255, 255, 0.5)'}">
						我有吗？
					</view>
					<view  @click="navto('chengjiao?id='+info.id)"  class="flex-ju-c wh175-61 ra15 borderE1E1E1"
						:style="{background:theme?'rgba(20, 20, 20, 0.5)':'rgba(255, 255, 255, 0.5)'}">
						成交记录
					</view>
					
				</view>
			</view>

			<view class="flex-a-i mt80 posire ">
				<image class="image posiab" mode="widthFix" src="/static/shibg.png"></image>
				
				<image class="image wh277-277 mr30 ra20 ml30" :src="goInfo.thumb"></image>
				<view class="flex1 posire colorfff" >
					<view class="flex-ju-b flex1  pb30">
						<view class="size31 bold one" >{{goInfo.title}}</view>
					</view>
					<view class="flex-a-i size25">
						<view class=" mr20">限量</view>
						<view>{{goInfo.sell_num}}份</view>
					</view>
					<view class="flex-a-i size25 mt10">
						<view class=" mr20">流通</view>
						<view>{{goInfo.release_num}}份</view>
					</view>
					<view class="flex-a-i size34 mt10">
						<view class="size25 mr20">起价</view>
						<view><text class="size20">¥</text>{{goInfo.examine_max_ratio / 100}}</view>
					</view>
				</view>
			</view>

			<view class="mt70 ">
				<view class="ra15 border999 flex-ju-b bold size26 pg5 bg3C3C3C color999">
					<view @click="tabim(0)" :class="{active:tindex==0,color999:theme}"
						class="wh330-85  ra15  flex-ju-c flex-col">
						<view class="">当前寄售</view>
					</view>
					<view @click="tabim(1)" v-if="goInfo.is_want==1" :class="{active:tindex==1,color999:theme}"
						class="wh330-85  ra15  flex-ju-c flex-col">
						<view class="">当前委托</view>
					</view>
					<view @click="tabim(2)"  v-if="goInfo.is_bidding==1" :class="{active:tindex==2,color999:theme}"
						class="wh330-85  ra15  flex-ju-c flex-col">
						<view class="">当前竞价</view>
					</view>
				</view>
			</view>
			<view class="size21 mt10">
				当前共{{tindex==0?goInfo.count_resale || 0:tindex==1?goInfo.count_want || 0:goInfo.count_bidding || 0}}单
			</view>
			

			<view v-if="isdata" class="flex-ju-c mt6vh">
				<image mode="widthFix" class="width250 ra20 posiab mt250" src="/static/tuishis.png"></image>
			</view>

			<view v-if="tindex==0" @click="navto('orderdetail?uuid='+item.uuid)" v-for="(item,s) in list" :key="a"
				class="flex-ju-b  mt30 ra20 borderE1E1E1" >
				<view>
					<view class=" flex-a-i size26 pg30">
						<view>
							<view class="flex-a-i">
								<view class="one" style="max-width: 250rpx;">
									{{item.title}}
								</view>
								<view v-if="item.status==1"  class="bgF6F7F8 ra5 size20 pg2-10  ml10 ">
									寄售中
								</view>
								<view v-else class="bgF6F7F8 ra5 color999 size20 pg2-10  ml10 ">
									锁单中
								</view>
							</view>
							<view class="flex-a-i mt10">
								<view class=" size22 ">
									<view class=" zindex5   color999  ">
										#{{ hao(item.nftId) }}/{{item.package_sku_id}}
									</view>
								</view>
								<view  class="flex-ju-c wh32-32 ra30 size20 ml20 bgBBFF8C">汇</view>
							</view>
							
						</view>
					</view>
				</view>
				<view class="flex-a-i">
					<view class="size41">
						<text class="size25">¥</text>{{item.money_price}}
					</view>
					<image class="image width10 flex ml20 mr30" mode="widthFix" src="/static/right.png"></image>
				</view>
			</view>
			<!-- <view v-else-if="tindex==1" @click="navto('orderdetail?id='+info.id+'&price='+item.product_money_price+'&current=1&pid='+item.id+`&num=${item.sku_total-item.ok_count}`)" v-for="(item,s) in wantList" :key="a"
				class="flex-ju-b mt30 ra20 borderE1E1E1"  :class="theme?'bg292929 colorfff':'bgF5F6F7'"> -->
				<view v-else-if="tindex==1"  v-for="(item,s) in wantList" :key="a"
					class="flex-ju-b mt30 ra20 borderE1E1E1"  :class="theme?'bg292929 colorfff':'bgF5F6F7'">
				<view>
					<view class=" flex-a-i size26 pg30">
						<view>
							<view class="flex-a-i">
								<view class="one" style="max-width: 250rpx;">
									{{item.title}}
								</view>
							</view>
							<view class="flex-a-i mt10">
								<view class=" size22 ">
									<view class=" zindex5   color999  ">
										合计{{item.sku_total-item.ok_count}}件
									</view>
								</view>
								<view  class="flex-ju-c wh32-32 ra30 size20 ml20 bgBBFF8C">汇</view>
								<!-- // <view @click.stop="tapup(item)" v-if="item.is_my" class="color999 size24 ml10  ">{{item.up==0?'置顶':'已置顶'}}</view> -->
								
								<view v-if="item.is_my" class="color999 size24 ml10">我的委托</view>
							</view>
						</view>
					</view>
				</view>
				<view class="flex-a-i">
					<view class="size41">
						<text class="size25">¥</text>{{item.money_price}}
					</view>
					<image class="image width10 flex ml20 mr30" mode="widthFix" src="/static/right.png"></image>
				</view>
			</view>

			<view v-else="tindex==2" @click="navto('orderdetail?id='+info.id+'&price='+item.product_money_price+'&current=2&pid='+item.id+`&num=${item.sku_total-item.ok_count}`)" v-for="(item,s) in biddingList" :key="a"
				class="flex-ju-b  mt30 borderE1E1E1 ra20" :class="theme?'bg292929 colorfff':'bgF5F6F7'">
				
				<view>
					<view class=" flex-a-i size26 pg30">
						<view>
							<view class="flex-a-i">
								<view class="one" style="max-width: 250rpx;">
									{{item.title}}
								</view>
							</view>
							<view class="flex-a-i mt10">
								<view class=" size22 ">
									<view class=" zindex5   color999  ">
										合计{{item.sku_total-item.ok_count}}件
									</view>
								</view>
								<view  class="flex-ju-c wh32-32 ra30 size20 ml20 bgBBFF8C">汇</view>
								<view v-if="item.is_my" class="color999 size24 ml10">我的竞价</view>
							</view>
						</view>
					</view>
				</view>
				<view class="flex-a-i">
					<view class="size41">
						<text class="size25">¥</text>{{item.money_price}}
					</view>
					<image class="image width10 flex ml20 mr30" mode="widthFix" src="/static/right.png"></image>
				</view>
			</view>


		</view>

	</view>
	<view class="con">
		<view v-if="tindex==0" class="posifi width92vw bottom0 zindex10 hidden ra20 bgfff "
			style="box-shadow: 0rpx -8rpx 24rpx 0rpx rgba(0,0,0,0.06);">
			<view class=" flex-ju-a pg15" >
				<view @click="$refs.xiadan.open()" class="bold wh300-100 flex-ju-c borderE1E1E1 size29 ra20 ">批量下单
				</view>
				<view @click="tapderg" class="bold wh300-100 flex-ju-c bg000 colorfff size29 borderE1E1E1 ra20 ">快捷下单</view>
			</view>
		</view>
		<view v-if="tindex==1||tindex==2" class="posifi width92vw bottom0 zindex10 hidden  ra20 bgfff"
			style="box-shadow: 0rpx -8rpx 24rpx 0rpx rgba(0,0,0,0.06);">
			<view  class="flex-a-i bg000 colorfff ">
				<!-- <view @click="navto(tindex==1?'weitous?id='+info.id : 'jingjia?id='+info.id)"
					class="srgb height100 width1000 flex-ju-c ra100 bold" :class="theme?'color000':''"> -->
					<view @click="topays"
						class="srgb height100 width1000 flex-ju-c ra100 bold" :class="theme?'color000':''">
						
					{{tindex==1?'我要委托':'我要竞价'}}
				</view>
			</view>
		</view>
	</view>
</view>

<uni-popup ref="jinjia" type="bottom">
	<view class="pilaing bgfff" style="height: auto;">
		<view class="flex-ju-b pt40">
			<view class="width28 ml30"></view>
			<view class="size29 bold  flex-ju-c">我要竞价</view>
			<image mode="widthFix" @click="$refs.jinjia.close()" class="width28 mr30" src="/static/close.png"></image>
		</view>
		<view class="con mt40">
			<view class="bgF6F7F8 pt40 pb40 ra20 mb30">
				<view class="con">
					<view class="flex-a-i">
						<image :src="jinfo.thumb" class="wh152-152 ra15"></image>
						<view class="ml20">
							<view style="max-width: 250rpx;" class="one size29 bold ">{{jinfo.title}}</view>
							<view class="flex-a-i size25 mt30 ">
								<view>
									<view class="color999">历史最低价</view>
									<view>¥{{jinfo.history_min/100}}</view>
								</view>
								<view class="ml50">
									<view class="color999">最新成交价</view>
									<view>¥{{jinfo.new_price/100}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				
				<view class="flex-ju-b con size26 mt30">
					<view>竞价价格</view>
					<view class="flex-a-i  center ra30 ">
						<input placeholder="请输入竞价价格" v-model="money_price"
							class="width180 ml10 mr10  size22 color000" :class="theme?' colorfff':'border-rfff'" />
						元
					</view>
				</view>
				<view class="color999 size24 ml30 mt30">* 最低出售价￥{{jinfo.examine_max_ratio/100}}, 高价挂单更快成交</view>
			</view>
			
			<view class="color999 size24 width500 center" style="margin: auto;">
				竞价订单需预先支付费用，订单未完成时的剩余费用 将会原路退回至您的账户
			</view>
			
			<view class="ra20 flex-ju-b pg30 bgfff height80 mt80"  style="box-shadow: 0rpx -8rpx 24rpx 0rpx rgba(0,0,0,0.06);">
				<view class="bold size62  " >
					<text class="size31">¥ </text> {{money_price?money_price:0}}
				</view>
				<view @click="tapmekr"  class="bold wh330-100 bg000 colorfff ra20 flex-ju-c   size29  ">
					立即竞价
				</view>
			</view>
			
		</view>
	</view>
</uni-popup>

<uni-popup ref="weitou" type="bottom">
	<view class="pilaing bgfff" style="height: auto;">
		<view class="flex-ju-b pt40">
			<view class="width28 ml30"></view>
			<view class="size29 bold  flex-ju-c">我要委托</view>
			<image mode="widthFix" @click="$refs.weitou.close()" class="width28 mr30" src="/static/close.png"></image>
		</view>
		<view class="con mt40">
			<view class="bgF6F7F8 pt40 pb40 ra20 mb30">
				<view class="con">
					<view class="flex-a-i">
						<image :src="winfo.thumb" class="wh152-152 ra15"></image>
						<view class="ml20">
							<view style="max-width: 250rpx;" class="one size29 bold ">{{winfo.title}}</view>
							<view class="flex-a-i size25 mt30 ">
								<view>
									<view class="color999">当前最低价</view>
									<view>¥{{winfo.max_bidding/100}}</view>
								</view>
								<view class="ml50">
									<view class="color999">最新成交价</view>
									<view>¥{{winfo.new_price/100}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				
				
				<view class="flex-ju-b con size26 mt30">
					<view>购买数量</view>
					<view class="flex-a-i  center ra30" :class="theme?'bg292929 colorfff':'bgF5F6F7'">
						<view :style="{borderRight:theme?'1px solid #000':'1px solid #F5F6F7'}" @click="wjian" class="wh48-60 flex-ju-c pl5 size40">-</view>
						<view>
							<input :class="theme?' colorfff':'color000'" class="width95" v-model="number" />
						</view>
						<view @click="wjia" :style="{borderLeft:theme?'1px solid #000':'1px solid #F5F6F7'}" class="wh48-60 flex-ju-c pr5  size40">+</view>
					</view>
				</view>
				<view class="flex-ju-b con size26 mt30">
					<view>委托价格</view>
					<view class="flex-a-i  center ra30">
						<input :placeholder="`¥${info.examine_min_ratio/100} - ￥${info.examine_max_ratio/100}`" v-model="money_price"
							class="width120 ml10 mr10  size22 color000" :class="theme?' colorfff':'border-rfff'" />
						元
					</view>
				</view>
			</view>
			
			<view class="color999 size24 width500 center" style="margin: auto;">
				委托订单需预先支付费用，订单未完成时的剩余费用 将会原路退回至您的账户
			</view>
			
			<view class="ra20 flex-ju-b pg30 bgfff height80 mt80"  style="box-shadow: 0rpx -8rpx 24rpx 0rpx rgba(0,0,0,0.06);">
				<view class="bold size62  " >
					<text class="size31">¥ </text> {{money_price?money_price:0}}
				</view>
				<view @click="tapwding"  class="bold wh330-100 bg000 colorfff ra20 flex-ju-c   size29  ">
					立即委托
				</view>
			</view>
			
		</view>
	</view>
</uni-popup>


	<uni-popup ref="xiadan" type="bottom">
		<view class="pilaing bgfff" >
			<view class="flex-ju-b pt40">
				<view class="width28 ml30"></view>
				<view class="size29 bold  flex-ju-c">批量下单</view>
				<image mode="widthFix" @click="$refs.xiadan.close()" class="width28 mr30" src="/static/close.png"></image>
			</view>
			<view class="con mt40">
			<view class="bgF6F7F8 pt40 pb40 ra20">
				<view class="flex-ju-b con size26 ">
					<view>限价</view>
					<view class="flex-a-i  center ra30">
						最高
						<input placeholder="请输入价格" v-model="from.max"
							class="width120 ml10 mr10  size22 color000" :class="theme?' colorfff':'border-rfff'" />
						元
					</view>
				</view>
				<view class="flex-ju-b con size26 mt30">
					<view>数量</view>
					<view class="flex-a-i  center ra30" :class="theme?'bg292929 colorfff':'bgF5F6F7'">
						<view :style="{borderRight:theme?'1px solid #000':'1px solid #F5F6F7'}" @click="jian" class="wh48-60 flex-ju-c pl5 size40">-</view>
						<view>
							<input :class="theme?' colorfff':'color000'" class="width95" v-model="from.num" />
						</view>
						<view @click="jia" :style="{borderLeft:theme?'1px solid #000':'1px solid #F5F6F7'}" class="wh48-60 flex-ju-c pr5  size40">+</view>
					</view>
				</view>
			</view>
			</view>
			
			<view class="flex-ju-c con mt50">
					<view @click="tapding" class="flex-ju-c width1000 height100 ra20 ml10 colorfff bg000">确认</view>
			</view>

		</view>
	</uni-popup>
</template>

<script>
	export default {
		data() {
			return {
				money_price:"",
				wantinfo:{},
				number: 1,
				winfo:{},
				theme: uni.getStorageSync('theme'),
				tindex: 0,
				info: {},
				jinfo:{},
				goInfo: {},
				list: [],
				multiBuy: false,
				page: 1,
				wantList: [],
				biddingList: [],
				isdata: false,
				timer: "",
				from: {
					max: "",
					num: 1
				}
			}
		},
		mounted() {
			// this.$refs.jinjia.open()
		},
		onLoad(option) {
			this.info = JSON.parse(option.info)
		},
		onShow() {
			this.page = 1
			this.list =[]
			this.biddingList=[]
			this.wantList =[]
			if (this.tindex == 0) {
				this.getList()
			} else if (this.tindex == 1) {
				this.getWantList()
			} else {
				this.getBiddingList()
			}
		},
		onPullDownRefresh(){
			this.page = 1
			this.list =[]
			this.biddingList=[]
			this.wantList =[]
			if (this.tindex == 0) {
				this.getList()
			} else if (this.tindex == 1) {
				this.getWantList()
			} else {
				this.getBiddingList()
			}
		},
		onReachBottom() {
			this.page++
			if (this.tindex == 0) {
				this.getList()
			} else if (this.tindex == 1) {
				this.getWantList()
			} else {
				this.getBiddingList()
			}
		},
		onHide() {
			uni.hideLoading()
			clearInterval(this.timer)
		},
		onUnload(){
			uni.hideLoading()
			clearInterval(this.timer)
		},
		
		methods: {
			tapup(item){
				if(item.up){
					return
				}
				uni.showModal({
					content:'置顶需要消耗 '+this.wantinfo.want_up_title +' x1',
					success:(res)=> {
						if(res.confirm){
							this.http('want/up',{
								id:item.id
							},'post').then(res=>{
								this.page=1
								this.wantList=[]
								this.getWantList()
							})
						}
					}
				})
				
			},
			youma(){
				uni.reLaunch({
					url:"/pages/user/index"
				})
			},
			tapmekr() {
				
				if (!this.money_price) {
					uni.showToast({
						title:"请输入价格",
						icon:"none"
					})
					return
				}
				var url = 'pages/shichang/suuwei?type=3'
				// #ifdef APP-PLUS
					url = "back.html?wei=1&index=3&type=3"
				// #endif
				this.http('makeBidding', {
					money_price: this.money_price,
					url,
					num:1,
					product_id: this.info.id
				},'post').then(res => {
					this.topay(res.data.order.pay_url)
				})
			},
			tapwding() {
				if (+this.number<1) {
					uni.showToast({
						title: "请输数量",
						icon: "none"
					})
					return
				}
				if (!this.money_price) {
					uni.showToast({
						title: "请输入价格",
						icon: "none"
					})
					return
				}
				var url=''
				 url = 'pages/shichang/suuwei?type=2'
				// #ifdef APP-PLUS
				 url = "back.html?wei=1&index=2&type=2"
				// #endif
				this.http('makeWant', {
					num:this.number,
					money_price: this.money_price,
					url,
					product_id: this.info.id
				}, 'post').then(res => {
					this.topay(res.data.order.pay_url)
				})
			},
			topays(){
				if(this.tindex==1){
					this.http('market/getPrice', {
						product_id: this.info.id
					}).then(res => {
						this.winfo=res.data
						this.$refs.weitou.open()
					})
				}else{
					this.http('market/getPrice', {
						product_id: this.info.id
					}).then(res => {
						this.jinfo = res.data
						
						this.$refs.jinjia.open()
					})
				}
			},
			tapding() {
				if (!this.from.num) {
					uni.showToast({
						title: "请输入数量",
						icon: "none"
					})
					return
				}
				if (!this.from.max) {
					uni.showToast({
						title: "请输入价格",
						icon: "none"
					})
					return
				}
				var url = 'pages/shichang/suu'
				// #ifdef APP-PLUS
					url = "back.html?erji=1"
				// #endif
				this.http('resale/multiBuy', {
					num: this.from.num,
					product_id: this.info.id,
					max: this.from.max,
					url
				}, 'post').then(res => {
					uni.showLoading({
						title: '正在抢单中'
					});
					this.goTimer(res.data.number)
				})
			},
			wjian() {
				if (this.number > 1) {
					this.number--
				}
			},
			wjia() {
				this.number++
			},
			
			jian() {
				if (this.from.num > 1) {
					this.from.num--
				}
			},
			jia() {
				this.from.num++
			},
			tapderg() {
				
				var url = 'pages/shichang/suu'
				// #ifdef APP-PLUS
					url = "back.html?erji=1"
				// #endif
				
				this.http('resale/quickBuy', {
					product_id: this.info.id,
					url
				}, 'post').then(res => {
					uni.showLoading({
						title: '正在抢单中'
					});
					this.goTimer(res.data.number)
				})
			},
			goTimer(number) {
				this.http('resale/checkNumber', {
					number: number
				}).then(res => {
					// 0 任务进行中，继续循环 1 已分配订单，结束循环，2没有可分配的订单，结束循环，提示下单失败
					if (res.data.status == 0) {
						if (!this.timer) {
							this.timer = setInterval(() => {
								this.goTimer(number)
							}, 1000)
						}
						uni.showLoading({
							title: '正在抢单中'
						});
					}
					if (res.data.status == 1) {
						clearInterval(this.timer)
						this.topay(res.data.pay_url)
						// proxy.toLink(res.data.pay_url)
					}
					if (res.data.status == 2) {
						clearInterval(this.timer)
						uni.showToast({
							title: "下单失败",
							icon: "none"
						})
					}
				})
			},
			getBiddingList() {
				this.http('market/bidding', {
					page: this.page,
					per_page: 10,
					product_id: this.info.id
				}).then(res => {
					this.biddingList = [...this.biddingList, ...res.data.list]
					if (this.biddingList.length) {
						this.isdata = false
					} else {
						this.isdata = true
					}
					uni.stopPullDownRefresh()
				})
			},
			getWantList() {
				this.http('market/want', {
					page: this.page,
					per_page: 10,
					product_id: this.info.id
				}).then(res => {
					this.wantinfo = res.data.info
					this.wantList = [...this.wantList, ...res.data.list]
					if (this.wantList.length) {
						this.isdata = false
					} else {
						this.isdata = true
					}
					
					uni.stopPullDownRefresh()
				})
			},
			getList() {
				this.http('market/resales', {
					page: this.page,
					per_page: 20,
					product_id: this.info.id
				}).then(res => {
					this.goInfo = res.data.info
					this.multiBuy = res.data.multiBuy
					this.list = [...this.list, ...res.data.list]

					if (this.list.length) {
						this.isdata = false
					} else {
						this.isdata = true
					}
					uni.stopPullDownRefresh()
				})
			},
			tabim(index) {
				if (this.tindex == index) {
					return
				}
				uni.hideLoading()
				clearInterval(this.timer)
				this.tindex = index
				this.list = []
				this.wantList = []
				this.biddingList = []
				this.page = 1
				if (index == 0) {
					this.getList()
				} else if (index == 1) {
					this.getWantList()
				} else {
					this.getBiddingList()
				}
			}
		}
	}
</script>

<style>
	.bgFF6E44{
		background: #FF6E44;
	}
	.active {
		background: #000;
		color:#BBFF8C;
	}

	.pilaing {
		height:600rpx;
		border-top-right-radius: 21rpx;
		border-top-left-radius: 21rpx;
		box-shadow: 0rpx 5rpx 19rpx 0rpx rgba(255,255,255,0.4);

	}

	.gaoumai {
		width: 111rpx;
		height: 49rpx;
		background: linear-gradient(0deg, #FF6E44, #FFA453, #FFDC7F);
		border-radius: 24rpx;
	}
	.border141414{
		border:1px solid #141414;
	}
	.borderFF6E44{
		border:1px solid #FF6E44;
	}
</style>